<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆界面</title>
    <link rel="stylesheet" href="../03_layout/CSS/reset.css">
    <style>
        /* 设置背景颜色 */
        body{
            background-color:white;
        }
        /* 设置登陆的大容器 */
        .wrapper{
            width: 600px;
            height: 352px;
            margin: 50px auto;
            background-color:#F6F6F6;

        }
        .title1{
            width: 600px;
            height: 52px;
            background: rgb(138, 216, 226);
            line-height: 52px;
            text-align: center;
        }
        .load{
            font-size: 38px;        
        }
        .img1{
            width: 300px;
            height: 300px;
            display: block;
            float: left;
        }
        .img2{
            padding-top: 5px;
            padding-right: 5px;
            display: block;
            float: right;
        }
        .logo_box{
            
            height: 50px;
            padding-top: 50px;
            text-align: center;

            background:#F6F6F6;
        }
        .logo{
            font-size: 32px;
            font-style: oblique;
            color: #4FC3DB;
            text-decoration-line: underline;
        }
        .goto_box{
            background-color: rgba(103, 170, 182, 0.082);
            height:200px;
        }
        .user{
            padding-top: 30px;
            text-align: center;
        }
        .password{
            padding-top: 30px;
        
            text-align: center;
        }
        .box_login{

            height: 30px;

            margin-top: 20px;

            text-align: center;

            padding-left: 330px;
        }
        .box_login a{

            border:turquoise 5px solid;
            text-decoration: none;
            font-size: 25px;
            color:white;
            background-color: turquoise;
        }
        .box_login a:hover{
            font-size: 28px;
            color: tomato;
        }
        .text{
            margin-left: 305px;
            margin-top: 15px;
        }
        .text span{
            font-size: 7px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="title1">
            <span  class="load"  >----LOGIN----</span>
        </div>

        <div class="menu">
            <div  class="img1">
                  <img width="300px" height="300px" src="./img/wx_logo.png" alt="">
             </div>
             
            <div class="load_right">
               <!-- 关闭按钮 -->
                <div class="img2">
                     <a href="#">
                         <img width="30px" height="30px" src="./img/关闭.png" alt="">
                     </a>
                </div>
                <!-- logo文字 -->
                <div class="logo_box">
                     <span class="logo">SEEKER-CODE</span>
                </div>

                <div class="goto_box">
                     <div class="user">
                         <span>用户名</span>
                        <input  type="text">
                     </div>

                     <div class="password">
                        <span>&nbsp密码&nbsp&nbsp&nbsp</span>
                        <input type="text">
                     </div>

                    <div class="box_login">
                        <a href="#">登陆</a>
                    </div>

                    <div class="text">
                        <span >&nbsp&nbsp&nbsptips：Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias obcaecati maxime maiores dolores.</span>
                    </div>


                </div>

                
            </div>
        </div>

    </div>
</body>
</html>